import Navbar from '../../compoents/Navbar'
import { useNavigate, useLocation } from 'react-router-dom'
import { CheckCircleFill } from 'antd-mobile-icons'
import { Toast } from 'antd-mobile'
import style from './index.module.css'

interface Report {
  id: number;
  title: string;
  type: string;
  typeColor: string;
  quantity: number;
}

interface ApplicationRecord {
  id: string
  title: string
  status: 'pending' | 'approved' | 'delivered' | 'cancelled'
  hospital: string
  applicant: string
  applicationTime: string
  orderAmount: number
  reports: Report[]
  reportQuantities: Record<number, number>
  userInfo?: {
    name: string
    phone: string
    address: string
  }
}

function Index() {
  const navigate = useNavigate()
  const { state } = useLocation()
  const record: ApplicationRecord = state?.record || {}
  const userInfo = record.userInfo || {
    name: '王小柯',
    phone: '13666666666',
    address: '四川省成都市锦江区666号'
  }
  
  console.log('record', record, state)
  
  // 模拟数据 - 实际项目中应该从API获取
  const orderData = {
    waybillNumber: 'SF10370165520000000',
    courier: '顺丰快递',
    pickupMethod: '邮寄',
    patientName: userInfo.name,
    idNumber: '505154623153121523',
    phone: userInfo.phone,
    applicationType: '住院病案复印',
    copyPurpose: '医保报销',
    copyCount: '1份',
    applicationTime: record.applicationTime || '2020-01-01 10:30:20',
    copyContent: '住院病案首页、出院记录、检查报告',
    orderAmount: record.orderAmount || 100.00,
    orderNumber: '2020010152513252523',
    paymentMethod: '微信支付',
    orderStatus: '已支付'
  }
  
  // 复制运单编号
  const handleCopyWaybill = () => {
    navigator.clipboard.writeText(orderData.waybillNumber).then(() => {
      Toast.show('运单编号已复制')
    }).catch(() => {
      Toast.show('复制失败')
    })
  }
  
  return (
    <div className={style.container}>
      <Navbar title='申请记录详情' showBack onBack={() => navigate(-1)} />
      {/* 状态头部 */}


      <div>
            <div className={style.statusHeader}>
                    <div className={style.statusIcon}>
                        <CheckCircleFill />
                    </div>
                    <div className={style.statusInfo}>
                        <div className={style.statusTitle}>已寄出</div>
                        <div className={style.statusDescription}>您的报告已寄出,请耐心等待</div>
                    </div>
                    </div>
                <div className={style.content}>
                    

                    {/* 物流信息 */}
                    <div className={style.infoCard}>
                    <div className={style.cardHeader}>
                        <h3 className={style.cardTitle}>物流信息</h3>
                    </div>
                    <div className={style.cardContent}>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>领取方式</span>
                        <span className={style.infoValue}>{orderData.pickupMethod}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>物流快递</span>
                        <span className={style.infoValue}>{orderData.courier}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>运单编号</span>
                        <span className={style.infoValue}>
                            {orderData.waybillNumber}
                            <button className={style.copyButton} onClick={handleCopyWaybill}>
                            📋 复制
                            </button>
                        </span>
                        </div>
                    </div>
                    </div>

                    {/* 患者信息 */}
                    <div className={style.infoCard}>
                    <div className={style.cardHeader}>
                        <h3 className={style.cardTitle}>患者信息</h3>
                    </div>
                    <div className={style.cardContent}>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>患者姓名</span>
                        <span className={style.infoValue}>{orderData.patientName}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>身份证号</span>
                        <span className={style.infoValue}>{orderData.idNumber}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>本人电话</span>
                        <span className={style.infoValue}>{orderData.phone}</span>
                        </div>
                    </div>
                    </div>

                    {/* 申请信息 */}
                    <div className={style.infoCard}>
                    <div className={style.cardHeader}>
                        <h3 className={style.cardTitle}>申请信息</h3>
                    </div>
                    <div className={style.cardContent}>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>申请类型</span>
                        <span className={style.infoValue}>{orderData.applicationType}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>复印用途</span>
                        <span className={style.infoValue}>{orderData.copyPurpose}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>复印份数</span>
                        <span className={style.infoValue}>{orderData.copyCount}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>申请时间</span>
                        <span className={style.infoValue}>{orderData.applicationTime}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>复印内容</span>
                        <span className={style.infoValue}>
                            <div className={style.copyContent}>
                            {orderData.copyContent}
                            </div>
                        </span>
                        </div>
                    </div>
                    </div>

                    {/* 订单信息 */}
                    <div className={style.infoCard}>
                    <div className={style.cardHeader}>
                        <h3 className={style.cardTitle}>订单信息</h3>
                    </div>
                    <div className={style.cardContent}>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>订单金额</span>
                        <span className={`${style.infoValue} ${style.amountValue}`}>
                            {orderData.orderAmount.toFixed(2)}元
                        </span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>订单编号</span>
                        <span className={style.infoValue}>{orderData.orderNumber}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>支付方式</span>
                        <span className={style.infoValue}>{orderData.paymentMethod}</span>
                        </div>
                        <div className={style.infoRow}>
                        <span className={style.infoLabel}>订单状态</span>
                        <span className={style.infoValue}>
                            <span className={`${style.statusTag} ${style.statusPaid}`}>
                            {orderData.orderStatus}
                            </span>
                        </span>
                        </div>
                    </div>
                    </div>
                </div>
      </div>


      


    </div>
  )
}

export default Index
